<script setup lang="ts">
	import { ref, defineComponent } from 'vue'
	import { onShow, onLoad, onShareAppMessage, onReachBottom } from "@dcloudio/uni-app";
	import { utils } from "@/utils/utils";
	import noneList from "@/components/none-list/none-list.vue";

	import { getCouponList, getGiftUserCouponId, getRule, getCancelGift } from "@/service/api"

	import useLoadMore from "@/hooks/use-load-more";
	const { judgeFinish, loadStatus, pageIndex, reachBottom } = useLoadMore()

	defineComponent({
		components: {
			noneList
		}
	})

	let tabList = ref([
		{
			name: '全部',
			type: 'ALL',
		},
		{
			name: '待使用',
			type: 'PENDING',
		},
		{
			name: '赠送中 ',
			type: 'GIVING_AWAY',
		},
		{
			name: '已赠送',
			type: 'GIFTED',
		},
		{
			name: '已使用',
			type: 'USED',
		},
		{
			name: '已失效',
			type: 'INVALID',
		}
	])

	let type = ref('ALL')


	let listDate = ref([])

	let noneShow = ref(0)

	let cardDataName = ref('')

	let modal = ref()

	let cardDataCode = ref('')
	let cardDataId = ref('')

	onShow(async () => {

	})
	onLoad(() => {
		getList()
		setTimeout(() => {
			console.log(23123123)
		}, 13000)
	})

	const goPage = (url : string, params : any) => {
		utils.authRoute(url, params)
	}
	const goDsge = () => {
		if (getCurrentPages().length == 1) {
			uni.switchTab({
				url: '/pages/index/index',
			})
		} else {
			uni.navigateBack({
				delta: 1,
			})
		}
	}

	const toggleTab = (e) => {
		type.value = e.type
		pageIndex.value = 1
		listDate.value = []
		getList()
	}

	const getList = () => {
		let params = {
			pageNum: pageIndex.value,
			pageSize: 10,
			type: type.value
		}
		getCouponList(params).then(res => {
			let add = res.data.records
			add.map((item, ind) => {
				item.valueSub = []
				item.limitShop = ''
				item.limitItem = ''
			})
			listDate.value.push(...add)
			judgeFinish(res.data.total)
		})
	}

	/**
		 * 滚动加载
		 */
	onReachBottom(() => {
		reachBottom(getList)
	})

	const goPresented = (e, i) => {
		uni.showLoading({
			title: '加载中'
		})
		cardDataName.value = i
		getGiftUserCouponId(e).then(res => {
			if (res.code == 200) {
				cardDataId.value = e
				cardDataCode.value = res.msg
				uni.hideLoading();
				modal.value.open()
			}
		}).catch(res => {
			uni.hideLoading();
		})

	}

	const goModalCall = () => {
		getCancelGift(cardDataId.value).then(res => {
			modal.value.close()
		}).catch(res => {

		})
	}

	const getRuleData = (e, i) => {
		if (listDate.value[i].valueSub.length != 0) {
			listDate.value[i].valueSub = []
			return
		}
		if (listDate.value[i].limitShop || listDate.value[i].limitItem || listDate.value[i].describeInfo) {
			listDate.value[i].valueSub = [0]
		} else {
			getRule(e).then(res => {
				if (res.code == 200) {
					listDate.value[i].limitShop = res.data.merchant
					listDate.value[i].limitItem = res.data.product
					listDate.value[i].describeInfo = res.data.describeInfo
					listDate.value[i].valueSub = [0]
				}
			}).catch(res => {

			})
		}
	}

	const cancelTheGift = (e) => {
		getCancelGift(e).then(res => {
			resetList()
		}).catch(res => {

		})
	}

	const resetList = () => {
		pageIndex.value = 1
		listDate.value = []
		getList()
	}
</script>

<template>
	<view class='container'>
		<uv-sticky>
			<view class="" style="background-color: #fff; height: 80rpx;">
				<uv-tabs :list="tabList" lineWidth="60rpx" lineColor="#AC936F" @click='toggleTab' :activeStyle="{
							color: '#AC936F',
							fontWeight: '500',
							fontSize:'30rpx'
				    	}" :inactiveStyle="{
							color: '#666',
							fontSize:'30rpx'
						}" itemStyle="padding-left: 30rpx; padding-right: 30rpx; height: 80rpx;"></uv-tabs>
			</view>
		</uv-sticky>

		<view class='ml-20rpx mr-20rpx mt-20rpx pb-60rpx'>
			<view class='list-box mb-20rpx'
				:class="{'list-boxs':item.couponStatus == 'INVALID', 'list-boxs':item.couponStatus == 'USED'}"
				v-for="(item,index) in listDate" :key="index">
				<view class='type-box'>
					<view class='type-boxs flex flex-items-center flex-justify-center'>
						<image src="@/static/commonImg/type-bond.png" mode=""></image>
						<text class='text-24rpx font-500' style="color: #2a2a2a;">
							{{item.usePattern == 'FULL_REDUCTION' ? '满减券' : item.usePattern == 'FULL_GIFT' ? '储值券' : item.usePattern == 'NO_THRESHOLD' ? '无门槛' : item.usePattern == 'FREE' ? '免单体验券' :'' }}
						</text>
					</view>
				</view>
				<view class='flex'>
					<view>
						<view class='sum-box flex flex-items-center flex-justify-center'>
							<view class="">
								<view class="flex flex-items-center flex-justify-center"
									v-if="item.usePattern != 'FREE'">
									<text class="text-28rpx font-500 mt-8rpx" style="color: #FF4040;">￥</text><text
										class="text-48rpx font-500"
										style="color: #FF4040;">{{item.discountAmount}}</text>
								</view>
								<view class="flex flex-items-center flex-justify-center" v-else>
									<text class="text-48rpx font-500" style="color: #FF4040;">免单</text>
								</view>
								<view class="flex flex-items-center flex-justify-center text-28rpx font-500"
									style="color: #595959;">
									{{item.targetAmount ? `满${item.targetAmount}可用` : item.availableType == 'SPECIFIED_PRODUCT' ? '指定商品可用' : item.availableType == 'SPECIFIED_MERCHANT' ? '指定门店可用' : item.availableType == 'UNIVERSAL' ? '全部门店可用' : ''}}
								</view>
							</view>
						</view>
					</view>

					<view class="ml-30rpx mr-14rpx" style="width: 100%;">
						<view class='uv-line-1 font-500 text-34rpx' style="color: #2a2a2a;">
							{{item.name}}
						</view>
						<view class='mt-10rpx text-24rpx' style="color: #969696;"
							v-if='item.couponStatus != "GIVING_AWAY"'>
							有效期：{{item.endDate}}
						</view>
						<view class='text-24rpx flex flex-items-center' style="color: #FF4040;"
							v-if='item.couponStatus == "GIVING_AWAY"'>
							<uv-count-down :time="30 * 60 * 60 * 1000" format="HH时mm分ss秒"></uv-count-down> 后超时未领取失效
						</view>
						<view class='flex flex-justify-between flex-items-center mt-16rpx'
							v-if=" item.couponStatus == 'GIFTED'">
							<view class="flex flex-items-center">
								<view class="avatar-box">
									<image :src="item.giftUserAvatar" mode="aspectFill"></image>
								</view>
								<view class='ml-12rpx text-26rpx flex' style="color: #969696;">
									<text class="uv-line-1"
										style="max-width: 200rpx;">{{item.giftUserNickname}}&nbsp;</text>已领取
								</view>
							</view>

							<!-- <view class='text-36rpx' style="color: #969696;" v-if="item.state == 5">
								已失效
							</view> -->

						</view>


						<view class='flex flex-justify-between flex-items-center mt-16rpx'
							v-if="item.couponStatus == 'PENDING'">
							<view class="flex flex-items-center" v-if="item.isGift == 1">
								<view class="avatar-box">
									<image :src="item.giftUserAvatar" mode="aspectFill"></image>
								</view>
								<view class='ml-12rpx text-26rpx flex' style="color: #969696;">
									<text class="uv-line-1"
										style="max-width: 200rpx;">{{item.giftUserNickname}}&nbsp;</text>赠送
								</view>
							</view>
							<view v-else></view>
							<view class='flex flex-items-center'>
								<view class='presented-box flex flex-items-center flex-justify-center'
									v-if="item.isGift != 1 && (item.useMethod == 'TRANSFERABLE' || item.useMethod == 'SELF_USE,TRANSFERABLE')"
									@click="goPresented(item.id,item.name)">
									赠送好友
								</view>

								<view class='use-box flex flex-items-center flex-justify-center ml-12rpx'
									v-if="item.useMethod == 'SELF_USE' || item.useMethod == 'SELF_USE,TRANSFERABLE'">
									去使用
								</view>
							</view>
						</view>

						<view class='flex flex-justify-between flex-items-center mt-16rpx'
							v-if='item.couponStatus == "GIVING_AWAY"'>
							<view class='text-24rpx' style="color: #969696;">
								有效期：{{item.endDate}}
							</view>
							<view class='flex flex-items-center'>
								<view class='presented-box flex flex-items-center flex-justify-center'
									@click="cancelTheGift(item.id)">
									取消赠送
								</view>
							</view>
						</view>

					</view>
				</view>

				<view class='wire-box'>
					<view class='lozenge-box1'></view>
					<view class='lozenge-box2'></view>
				</view>
				<view @click="getRuleData(item.id,index)">
					<uv-collapse :border='false' :value='item.valueSub'>
						<uv-collapse-item :ref="`rule0`" title="使用规则" value='详情' :asyncSub='true'>
							<view class='flex' v-if="item.limitShop != 'FULL_GIFT'">
								<view class='text-26rpx' style="color: #969696;  white-space: nowrap; ">
									可用门店：
								</view>
								<view class='text-26rpx' style="color: #969696;">
									{{item.limitShop || '暂无'}}
								</view>
							</view>
							<view class='flex mt-16rpx' v-if="item.limitItem != 'FULL_GIFT'">
								<view class='text-26rpx' style="color: #969696;  white-space: nowrap; ">
									可用项目：
								</view>
								<view class='text-26rpx' style="color: #969696;">
									{{item.limitItem || '暂无'}}
								</view>
							</view>
							<view class='flex mt-16rpx'>

								<view class='text-26rpx' style="color: #969696;  white-space: nowrap; ">
									使用说明：
								</view>
								<view class='text-26rpx' style="color: #969696;">
									{{item.describeInfo ||  '暂无'}}
								</view>
							</view>
						</uv-collapse-item>
					</uv-collapse>
				</view>

				<!-- <view class='mt-20rpx flex flex-items-center flex-justify-between ml-30rpx mr-30rpx'>
					<view class='text-26rpx' style="color: #595959;">
						使用规则
					</view>

					<view class='flex flex-items-center'>
						<text class="text-26rpx mr-12rpx" style="color: #969696;">详情</text><uv-icon name="arrow-down"
							color="#D8D8D8" size="16"></uv-icon>
					</view>
				</view> -->
			</view>

			<view style="margin-top: 24vh;" v-if="noneShow == 2">
				<noneList res='noneList'></noneList>
			</view>
		</view>

		<uv-modal ref="modal" title="赠送提示" content='确定要赠送当前票' align='center' :closeOnClickOverlay='false'>
			<template v-slot:confirmButton>
				<view class='flex flex-items-center flex-justify-center' style="padding-bottom: 60rpx;">
					<button class="verify-box flex flex-items-center flex-justify-center"
						@click="goModalCall">取消</button>
					<button data-name="share" class="verify-box1 flex flex-items-center flex-justify-center"
						open-type="share">确认</button>
				</view>
			</template>
		</uv-modal>
	</view>
</template>

<style>
	page {
		background-color: #f7f7f7;
	}
</style>

<style scoped lang="scss">
	button {
		border: none;
		/* 移除边框 */
		background-color: transparent;
		/* 设置背景透明 */
		padding: 0;
		/* 移除内边距 */
		margin: 0;
		/* 移除外边距 */
		line-height: inherit;
		/* 继承行高 */
		border-radius: 50%;
		/* 移除圆角 */
	}

	button::after {
		content: none;
		/* 移除伪元素 */
	}

	.type-box {
		position: absolute;
		top: 0;
		left: 20rpx;
		width: 160rpx;
		height: 42rpx;
		z-index: 2;
	}

	.list-box {
		position: relative;
		padding-top: 30rpx;
		width: 100%;
		border-radius: 20rpx;
		background: #fff;
	}

	.list-boxs {
		filter: grayscale(1);
	}

	.type-box {
		position: absolute;
		top: 0;
		left: 20rpx;
		width: 160rpx;
		height: 42rpx;
		z-index: 2;
	}

	.type-boxs {
		position: relative;
		width: 160rpx;
		height: 42rpx;
	}

	.type-boxs image {
		position: absolute;
		width: 160rpx;
		height: 42rpx;
		z-index: -1;
	}

	.sum-box {
		width: 200rpx;
		height: 146rpx;
		border-right: 2rpx solid #F9E6C7;
	}

	.avatar-box {
		width: 36rpx;
		height: 36rpx;
		border: 2rpx solid #EFEFEF;
		border-radius: 50%;
	}

	.avatar-box image {
		width: 36rpx;
		height: 36rpx;
		border-radius: 50%;
	}

	.presented-box {
		width: 150rpx;
		height: 52rpx;
		border-radius: 222rpx;
		background: #F7F7F7;
		color: #2A2A2A;
		font-size: 28rpx;
		font-weight: 500;
	}

	.use-box {
		width: 120rpx;
		height: 52rpx;
		border-radius: 222rpx;
		background: #FDC15C;
		color: #2A2A2A;
		font-size: 28rpx;
		font-weight: 500;
	}

	.wire-box {
		position: relative;
		margin-top: 20rpx;
		border-top: 2rpx dashed #EFEFEF;
	}

	.lozenge-box1 {
		position: absolute;
		right: -12rpx;
		top: -22rpx;
		background-color: #f7f7f7;
		width: 20rpx;
		height: 40rpx;
		clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
		/* 定义菱形形状 */
		z-index: 20;
	}

	.lozenge-box2 {
		position: absolute;
		left: -12rpx;
		top: -22rpx;
		background-color: #f7f7f7;
		width: 20rpx;
		height: 40rpx;
		clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
		/* 定义菱形形状 */
		z-index: 20;
	}

	:deep(.uv-cell__title-text) {
		font-size: 26rpx !important;
		color: #595959 !important;
	}

	:deep(.uv-cell__value) {
		font-size: 26rpx !important;
		color: #969696 !important;
	}

	:deep(.uv-count-down__text) {
		color: #FF4040 !important;
		font-size: 24rpx !important;
	}

	.verify-box {
		width: 240rpx;
		height: 80rpx;
		border-radius: 222rpx;
		background: #F7F7F7;
		margin-right: 40rpx;
	}

	.verify-box1 {
		width: 240rpx;
		height: 80rpx;
		border-radius: 222rpx;
		background: #FDC15C;
	}
</style>